<template>
	<view class="container">
		<view style="padding-bottom:100rpx">
				<view class="tui-product-list">
						
		
					<view class="tui-product-container" >
		
						<!-- <template is="productItem" data="{{item,index:index}}" /> -->
						<!--商品列表-->
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="detail(item)">
							<image :src="item.thumbnail" class="tui-pro-img" :class="[isList ? 'tui-proimg-list' : '']"   style="width: 260rpx;height: 260rpx !important;border-radius: 30rpx;"/>
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{ item.title }}</view>
		
								<view>
									<view class="tui-pro-price">
										<tui-icon  name="clock" :size='20' ></tui-icon><text class="tui-factory-price">活动时间:{{ item.activitytimestr }}</text>
									</view>
									<view class="tui-pro-price">
										<tui-icon  name="weather" :size='20' ></tui-icon><text class="tui-factory-price">活动地点: {{ item.place }}</text>
									</view>
									
									
								</view>
							</view>
						</view>
						<!--商品列表-->
		
					</view>
		
				</view>
				
				<view class="paragraph"></view>
				
				
				<view class="personnel">

					<view>
						<text class="title">参团人员</text>
						<text class="price">￥{{ item.price }}/成人 ￥{{item.children_price}}/儿童</text>		
								
						<block v-for="(item,index) in lianxi" :key="index">
							<view v-if="item.sign=='1'" style="padding-top: 20rpx;">
								<view class="sign_name">参团人员</view>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">姓名</view>
										<view class="tui-input">{{item.name}}</view>
									</view>
								</tui-list-cell>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">类别</view>
										<view class="tui-input" v-if="item.sex=='1'">成人</view>
										<view class="tui-input" v-else>儿童</view>
									</view>
								</tui-list-cell>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">手机号</view>
										<view class="tui-input" >{{item.phone}}</view>
									</view>
								</tui-list-cell>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">证件号码</view>
										<view class="tui-input" >{{item.certificates}}</view>
									</view>
								</tui-list-cell>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">出生日期</view>
										<view class="tui-input" >{{item.birthday}}</view>
									</view>
								</tui-list-cell>
							</view>
						</block>
						<view class="button" @click="addpeople(0)">+添加参团人员</view>
					</view>
				</view>
				
				<view class="paragraph"></view>
				
				
				<view class="personnel">
					<view>
						<text class="title">参团宠物</text>
						<text class="price">￥{{ item.pets_price }}/宠物</text>	
									
						<block v-for="(item,index) in petslist" :key="index">
							<view v-if="item.sign=='1'" style="padding-top: 20rpx;">
								<view class="sign_name">参团宠物</view>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">昵称</view>
										<view class="tui-input">{{item.title}}</view>
									</view>
								</tui-list-cell>

								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">品种</view>
										<view class="tui-input" >{{item.varieties}}</view>
									</view>
								</tui-list-cell>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">毛色</view>
										<view class="tui-input" >{{item.color}}</view>
									</view>
								</tui-list-cell>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">注射疫苗时间</view>
										<view class="tui-input" >{{item.vaccines_time}}</view>
									</view>
								</tui-list-cell>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">宠物生日</view>
										<view class="tui-input" >{{item.birthday}}</view>
									</view>
								</tui-list-cell>
							</view>
						</block>
						<view class="button" @click="addpeople(1)">+添加参团宠物</view>
					</view>
				</view>
				
				<view class="paragraph"></view>
				
				
				<view class="personnel">
					<view>
						<text class="title">酒店</text>
					</view>
					<view class="tui-product-container" >
					
						<!--商品列表-->
						<block v-for="(item2,index2) in jiudian" :key="index2">
							<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="shuju(index2)">
								<image :src="item2.thumbnail" class="tui-pro-img" />
								<view class="tui-pro-content" style="left: 100px;">
									<view class="tui-pro-tit" style="font-size: 30rpx;padding-bottom: 10rpx;">{{item2.title}}</view>
									<view class="tui-pro-tit" style="font-size: 24rpx;color: #a0a0a0;padding: 10rpx 0;">{{item2.more}}</view>
									<view class="tui-number-box tui-bold tui-attr-title">
										<view class="tui-attr-title" style="float:left;color: red;">￥{{item2.price}}/元</view>
										<yp-number-box @change="change" :index="index"  style="padding-left: 60rpx;"/>
									</view>
								</view>
							</view>
						</block>
		
						<!--商品列表-->
					
					</view>
					
				</view>
				
				<view class="paragraph"></view>
				
				
				<view class="personnel">
					<view>
						<text class="title">车费</text>
					</view>
					<view class="tui-product-container" >
					
						<!--商品列表-->
						<block v-for="(item2,index2) in car" :key="index2">
							<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" style="padding-bottom: 30rpx;" @tap="farecars(index2)">
								<image :src="item2.thumbnail" class="tui-pro-img" />
								<view class="tui-pro-content" style="left: 100px;">
									<view class="tui-pro-tit" style="font-size: 30rpx;padding-bottom: 10rpx;">{{item2.title}}</view>
									<view class="tui-pro-tit" style="font-size: 24rpx;color: #a0a0a0;padding: 10rpx 0;">{{item2.address}}</view>
									<view class="tui-number-box tui-bold tui-attr-title">
										<view class="tui-attr-title" style="float:left;color: red;">￥{{item2.price}}/元</view>
										<yp-number-box @change="fare" :index="index" :key="1" style="padding-left: 50rpx;"/>
									</view>
								</view>
							</view>
						</block>
						
						<!--商品列表-->
					
					</view>
					
				</view>
				
				<view class="paragraph"></view>
				
				
				<view class="personnel">
					<view>
						<text class="title">安全备注(非必填项)</text>
						<tui-list-cell :hover="false" padding="0">
							<view class="tui-line-cell">
								<view class="tui-title">姓名</view>
								<input placeholder-class="tui-phcolor" class="tui-input" @input="recordName" placeholder="请输入" 
								 type="text" />
							</view>
						</tui-list-cell>
						<tui-list-cell :hover="false" padding="0">
							<view class="tui-line-cell">
								<view class="tui-title">联系方式</view>
								<input placeholder-class="tui-phcolor" class="tui-input" @input="recordphone" placeholder="请输入" 
								 type="text" />
							</view>
						</tui-list-cell>
						<tui-list-cell :hover="false" padding="0">
							<view class="tui-line-cell">
								<view class="tui-title">家庭住址</view>
								<input placeholder-class="tui-phcolor" class="tui-input" @input="recordaddress" placeholder="请输入"
								 type="text" />
							</view>
						</tui-list-cell>
					</view>
				</view>
				
			</view>		
							
							
							
			<!--底部操作栏-->
			<view class="tui-operation" style="position: fixed;bottom:0">
				<view class="tui-operation-left tui-col-4">
					<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150">
						<button open-type="contact" class="contact" style="    line-height: 1.5;
    background-color: #fff;">
							<tui-icon name="kefu" :size="22" color='#333'></tui-icon>
							<view class="tui-operation-text tui-scale-small">客服</view>
						</button>
					</view>
					<view class="tui-operation-item" >
						<button class="contact" open-type="share" style="    line-height: 1.5;
    background-color: #fff;">
							<tui-icon name="share" :size="22" color='#333'></tui-icon>
							<view class="tui-operation-text tui-scale-small">分享</view>
						</button>
					</view>
				</view>
				<view class="tui-operation-right tui-right-flex tui-col-8 tui-btnbox-4" @tap="signup()">
					<view class="tui-flex-1">
						<tui-button type="warning" shape="circle" size="mini" >确认报名</tui-button>
					</view>
				</view>
			</view>

	</view>
</template>

<script>
	var api = require('@/common/api.js')
	import tuiIcon from "@/components/icon/icon"
	import tuiNumberbox from "@/components/numberbox/numberbox"
	import ypNumberBox from "@/components/yp-number-box/yp-number-box.vue"
	import tuiListCell from "@/components/list-cell/list-cell"
	export default {
		onShareAppMessage(res) {
			return {
			  title: this.item.title,
			  path: '/pages/goodsDetail/goodsDetail?id='+this.item.id
			}
		},
		components: {
			tuiIcon,
			tuiNumberbox,
			ypNumberBox,
			tuiListCell
		},
		data() {
			return {
				userinfo:'',
				item:'',
				jiudian:[],
				car:[],
				lianxi:[],
				petslist:[],
				num:'',
				carnum:'',
				Info:{},
			}
		},
		onLoad: function(options) {
			console.log(this.petslist);
			console.log(options);
			let info = JSON.parse(decodeURIComponent(options.query));
			this.item = info.items;
			console.log(this.item);
			api.get({
				url:'order/class',
				data:{
					id:this.item.class_id,
				},
				success: res => {
					
					this.jiudian = res.data;
				}
			});
			api.get({
				url:'order/car',
				data:{
					id:this.item.id,
				},
				success: res => {
					
					this.car = res.data;
				}
			});
			
			
		},
		methods: {

			change: function(e) {
				this.num = e;
			},
			
			shuju: function(e) {
				this.jiudian[e].num = this.num;
				console.log(this.jiudian);
			},
			
			fare: function(e) {
				this.carnum = e;
			},
			
			farecars: function(e) {
				this.car[e].carnum = this.carnum;
				console.log(this.car);
			},
			
			addpeople:function(e)
			{
				if(e==0){
					this.lianxi == ''
				}else{
					this.petslist == ''
				}
				uni.navigateTo({
					url:"/pages/mall-extend/add/add?type="+e
				})
			},

			
			recordName(e) {  
				this.Info.name = e.detail.value;  
			}, 
			recordaddress(e) {
				this.Info.address = e.detail.value;  
			}, 
			recordphone(e) {
				this.Info.phone = e.detail.value;  
			},  
			
			signup(){
				if(this.tui.isLogin()){
					this.userinfo = uni.getStorageSync("user")
				}else{
					uni.showToast({
						title:"您没有登陆，请先登录",
						icon:"none"
					})
					setTimeout(function(){
						uni.navigateTo({
							url:"/pages/mall-extend/my/my"
						})
					},1000)
				}

				if(this.lianxi != '' && this.petslist != ''){
					let query = {
						items:this.item,
						jiudian:this.jiudian,
						car:this.car,
						lianxi:this.lianxi,
						petslist:this.petslist,
						info:this.Info
					};
					
					uni.navigateTo({
					
						url: '../confirmsign/confirmsign?type=menpiao&query='+encodeURIComponent(JSON.stringify(query)),
					
					})
				}else{
					uni.showToast({
						title:"您没有选择参团人员或者参团宠物",
						icon:"none"
					})
				}
				
			}


		},


	}
</script>

<style>
	.sign_name{background-color: #ccc;
    padding: 0 10rpx;}
	/*底部操作栏*/
	
	.tui-col-8 {
		width: 66.66666666%;
	}
	
	.tui-col-4 {
		width: 33.33333333%;
	}
	
	.tui-operation {
		width: 100%;
		height: 100rpx;
		/* box-sizing: border-box; */
		background: rgba(255, 255, 255, 0.98);
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;

	}
	
	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}
	
	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	
	.tui-operation-left {
		display: flex;
		align-items: center;
	}
	
	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}
	
	.tui-operation-text {
		font-size: 22rpx;
		color: #333;
	}
	
	.tui-opacity {
		opacity: 0.5;
	}
	
	.tui-scale-small {
		transform: scale(0.9);
		transform-origin: center center;
	}
	
	.tui-operation-right {
	width: 400rpx;
    font-size: 30rpx;
    height: 70rpx;
    line-height: 70rpx;
    background: #ff7900 !important;
    color: #fff;
    text-align: center;
    border-radius: 50rpx;
	margin-right:50rpx
	}
	
	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tui-btnbox-4 .tui-btn-class {
		width: 90% !important;
		display: block !important;
		font-size: 28rpx !important;
	}
	
	.tui-operation .tui-badge-class {
		position: absolute;
		top: -6rpx;
		/* #ifdef H5 */
		transform: translateX(50%)
			/* #endif  */
	}
	
	.tui-flex-1 {
		flex: 1;
	}
	
	/*底部操作栏*/
	/* 参团 */
	.personnel{padding:10px}
	.title{font-weight: 600;position: relative;}
	.price{float:right;font-size:24rpx;color:red;line-height:40rpx}
	.title:before{
			content: "";
			position: absolute;
			left:0;
			bottom:2rpx;
			width:60rpx;
			height:4rpx;
			background-color:rgb(255, 204, 0);
	}
		.button{background-color: rgb(255, 204, 0);
padding: 20rpx 10rpx;
width: 60%;
margin: 40rpx auto;
border-radius: 20rpx;
text-align: center;
}
		
	
	/* 商品列表*/
	
	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
	}
	
	.tui-product-container {
		flex: 1;
		margin-right: 10rpx;
	}
	
	.tui-product-container:last-child {
		margin-right: 0;
	}
	
	.tui-pro-item {
		position: relative;
		padding-top: 30rpx;

	
	}
	
	.tui-flex-list {
		display: flex;
		margin-bottom: 1rpx !important;
		border-bottom: 1rpx solid #ccc;
		padding-bottom: 20rpx;
	
	}
	
	.tui-pro-img {
width: 150rpx;
    height: 150rpx;
    border-radius: 20rpx;
	}
	
	.tui-proimg-list {
		width: 260rpx;
		height: 260rpx !important;
		flex-shrink: 0;
		border-radius: 12rpx;
	}
	
	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
		position: absolute;
		left: 130px;
		top: 0;
		width: 65%;
	
	}
	
	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	.tui-pro-price {
		padding-top: 18rpx;
	}
	
	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}
	
	.tui-factory-price {
		font-size: 30rpx;
		color: #a0a0a0;
		padding-left: 6rpx;
	}
	
	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}
	/* 商品列表*/
	
	.paragraph{width:100%;height:10rpx;background-color:rgba(0,0,0,.06)}
	
	
	.tui-btn-block {
		font-size: 36rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
	.tui-danger {
		background: rgb(255, 204, 0) !important;
		color: #fff;
		font-size:32upx;
		border-radius: 0;
	}
	.tui-addr-box {
		padding: 20rpx 0;
	}
	
	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		background: #fafafa;
		align-items: center;
	}
	
	.tui-title {
		width: 220rpx;
		font-size: 28rpx;
	}
	
	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}
	
	.tui-input {
		width: 500rpx;
	}
	
	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}
	
	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}
	.tui-cell-title{
		font-size: 28rpx;
	}
	.tui-addr-label {
		margin-left: 70rpx;
	}
	
	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}
	.tui-label-active{
		background: #E41F19;
		border-color:#E41F19;
		color: #fff;
	}
	.tui-swipe-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		padding: 10rpx 24rpx;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 28rpx;
	}
	
	.tui-switch-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}
	
	/* #ifndef H5 */
	.tui-switch-small .wx-switch-input {
		margin: 0 !important;
	}
	
	/* #endif */
	
	/* #ifdef H5 */
	>>>uni-switch .uni-switch-input {
		margin-right: 0 !important;
	}
	
	/* #endif */
	
	.tui-addr-save {
		padding: 24rpx;
		margin-top: 100rpx;
	}
	
	.tui-del {
		padding: 24rpx;
	}
	
</style>
